<template>
  <view class="goods_detail">
    <view class="swipeiImg">
     <swiper @tap="preview" indicator-dots='true' indicator-color='#72757f' indicator-active-color='#ea4350' autoplay='true' interval='1000' circular='true'>
        <swiper-item v-for="(item,index) in detailList.pics" :key="index">
           <image mode="widthFix" :src="item.pics_mid_url"></image>
        </swiper-item>
      </swiper>
  </view>
  <!-- 价格 -->
  <view class="present">
      <view class="price">{{detailList.goods_price}}</view>
      <view class="collection">
        <button class="iconfont icon-zhuanfa" open-type="share"></button>
       <view @tap='follow' class="follow iconfont" :class="isFav ? 'icon-shoucang' :'icon-shoucang1'"></view>
      </view>
  </view>
  <!-- 文字 -->
  <view class="text">{{detailList.goods_name}}</view>
    <!-- 图文详情 -->
    <view class="detail_content">
        <view class="title">图文详情</view>
        <rich-text :nodes="detailList.goods_introduce"></rich-text>
    </view>
    <!-- 底部 -->
    <view class="footer">
        <view class="call">
            <button open-type="contact" class="iconfont icon-kefu kefu"></button>
            <view class="call_text">联系客服</view>
        </view>
         <view class="cart"  @tap='toPageCart'>
                <view  class="iconfont icon-gouwuche shopping"></view>
                <view class="cart_text">购物车</view>
         </view>
            <view class="join" @tap='addCart'>加入购物车</view>
            <view class="buy" @tap='buyNow'>立即购买</view>
    </view>
  </view>
</template>

<script>
import http from '@/utils/http.js';
export default {
    data(){
        return{
            goods_id: '',
            detailList: {},
            isFav:false
        }
    },
    async onLoad(options){
        console.log(options);
        this.goods_id = options.goods_id || '33791';
        await this.fetchDetail();
        //读取Storage
        const favList=uni.getStorageSync('detailList_follow') || [];
        console.log(favList);
        // 寻找商品是否在列表中
        const isExect=favList.find(item=>{
            if(item.goods_id === this.detailList.goods_id){
                return item;
            }
        })
        // console.log(isExect);  
        if(isExect){
            this.isFav=true;
        }
    },
    methods:{
        // 图片预览API
        preview(){
            const pics=this.detailList.pics.map(pic=>{
                return pic.pics_big_url
            })
           uni.previewImage({
               urls: pics
           }) 
        },
        // 获取商品数据
        async fetchDetail(){
           this.detailList= await http.get('/goods/detail', {goods_id: this.goods_id })  
        },
        //关注收藏
        async follow(){
            //存储到Storage
            const [err,res]=await uni.getStorage({
                key:'detailList_follow'
            })
            const allFav=res? res.data : [];
            const index=allFav.findIndex(item=>{
                if(item.goods_id===this.detailList.goods_id){
                    return item;
                }
            })
                //不存在某个商品就收藏
                if(index === -1){
                    allFav.push(this.detailList);
                    this.isFav=true;
                }else{
                    allFav.splice(index,1);
                    this.isFav=false;
                }
                uni.setStorage({
                    key:'detailList_follow',
                    data:allFav
            }) 
        },
        //跳转购物车
        toPageCart(){
             uni.switchTab({
                url:'/pages/cart/index'
            })
        },
        // 加入购物车
        addCart(){
            const cart=uni.getStorageSync('cart') || [];
            // 查找购物车是否有当前商品
            const index=cart.findIndex(item=>{
                if(item.goods_id === this.detailList.goods_id){
                    return item
                }
            })
            //表示找到相同商品数量加一
            if(index > -1){
               cart[index].counter=cart[index].counter +1;
            }else{
                this.detailList.counter = 1;
                cart.push(this.detailList)
            }
            uni.setStorageSync('cart',cart)
            uni.showToast({
                title:'加入购物车成功',
                icon: 'none'
            })
        },
        //立即购买
        buyNow(){
            this.addCart()
            this.toPageCart()
        }
    }
}
</script>

<style lang="less" scoped>
.goods_detail{
    .swipeiImg{
        height: 497rpx;
        padding: 0 126rpx 0 127rpx;
        swiper{
            height: 100%;
            image{
                width: 497rpx;
            } 
        }     
    }
    .present{
        display: flex;
        justify-content: space-between;
        padding: 0 36rpx 0 33rpx;
        margin-top: 19rpx;
        .price{
            font-size: 36rpx;
            color: #eb4855;
        }
        .collection{
            display: flex;
            align-items: center;
            button{
              background-color: #fff;
              padding: 0;
              line-height: 1;
            }
            button:after{
                 border: 0;
            }
            .follow {
                margin-left: 45rpx;
                color: #ffd400;
            }
        }
    }
    .text{
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        width: 681rpx;
        height: 84rpx;
        margin-top: 19rpx;
        font-weight: bold;
        padding: 0 33rpx 0 36rpx;
        color: #585858;
        margin-bottom: 48rpx;
    }
    .detail_content{
        padding: 0 17rpx;
        border-top: 19rpx solid #f9f9f9;
        .title{
            font-size: 28rpx;
            color: #545454;
            font-weight: bold;
            text-align: center;
            margin: 19rpx 0;
        }
    }
    .footer{
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #fff;
        border-top: 1rpx solid #efefef;
        height: 94rpx;
        padding: 0 30rpx 0 62rpx;
        .call{
            display: flex;
            flex-direction: column;
            font-size: 20rpx;
            color: #444444;
            button{
              background-color: #fff;
              padding: 0;
              line-height: 1;
            }
            button:after{
                border: 0;
            }
            .kefu{
                font-size: 40rpx;
                text-align: center;
            }
        }
        .cart{
            display: flex;
            flex-direction: column;
            font-size: 20rpx;
            color: #444444;
            margin-left: 30rpx;
              .shopping{
                  font-size: 40rpx;
                  text-align: center;
              }
        }
        .join{
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #fcaa23;
            border-radius: 30rpx;
            color: #fef7ec;
            font-size: 26rpx;
            width: 196rpx;
            height: 60rpx;
            margin-left: 30rpx;
        }
        .buy{
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #ea4350;
            border-radius: 30rpx;
            color: #fef7ec;
            font-size: 26rpx;
            width: 196rpx;
            height: 60rpx;
        }
    }
}
</style>